export default {
    data() {
        return {
            obj: {
                opacity: 0,
            },
            bgc: {
               backgroundColor:"",
            },
            flag:false
        }
    },
    template: `
    <div class="moments"  @scroll="scrollEvent">
        <div class="header" :style="bgc">
            <div>
                <img src="./img/arrow-left-bold.png" alt=""  @click="back">
            </div>
            <div :style=obj>朋友圈</div>
            <div class="header-icon">
                <img src="./img/camera.png" alt="" v-if="flag">
                <img src="./img/camera-fill.png" alt="" v-else>
            </div>
        </div>
        <div class="intro">
            <img src="./img/wechat-cover.jpg" alt="" class="bg">
            <img src="./img/wechat-cover.jpg" alt="" class="fp">
        </div>

        <div class="show" >
            <div class="left">
                <div><img src="./img/wo.jpg" alt=""></div>
            </div>
            <div class="right">
                <div>
                    <h4>老王</h4>
                    <p>一起去打篮球哈</p>
                </div>
                <div class="pic"><img src="./img/朋友圈.jpg" alt=""></div>
                <div class="bot">
                    <p>1小时前</p>
                    <div><img src="./img/pl.png" alt=""></div>
                </div>
            </div>
        </div>
        <div class="show">
            <div class="left">
                <div><img src="./img/wo.jpg" alt=""></div>
            </div>
            <div class="right">
                <div>
                    <h4>老王</h4>
                    <p>一起去打篮球哈</p>
                </div>
                <div class="pic"><img src="./img/朋友圈.jpg" alt=""></div>
                <div class="bot">
                    <p>1小时前</p>
                    <div><img src="./img/pl.png" alt=""></div>
                </div>
            </div>
        </div>
        <div class="show">
            <div class="left">
                <div><img src="./img/wo.jpg" alt=""></div>
            </div>
            <div class="right">
                <div>
                    <h4>老王</h4>
                    <p>一起去打篮球哈</p>
                </div>
                <div class="pic"><img src="./img/朋友圈.jpg" alt=""></div>
                <div class="bot">
                    <p>1小时前</p>
                    <div><img src="./img/pl.png" alt=""></div>
                </div>
            </div>
        </div>
        <div class="show">
            <div class="left">
                <div><img src="./img/wo.jpg" alt=""></div>
            </div>
            <div class="right">
                <div>
                    <h4>老王</h4>
                    <p>一起去打篮球哈</p>
                </div>
                <div class="pic"><img src="./img/朋友圈.jpg" alt=""></div>
                <div class="bot">
                    <p>1小时前</p>
                    <div><img src="./img/pl.png" alt=""></div>
                </div>
            </div>
        </div>
    </div>
    `,
    methods: {
        back() {
            this.$router.back()
        },
        scrollEvent(e) {
            console.log(e.target.scrollTop);
            let h = e.target.scrollTop;
            if (100 < h < 200) {
                this.bgc.backgroundColor = "";
                this.flag = false;
                this.obj.opacity = (h-100) / 100;
            }
            if (h > 200) {
                this.flag = true;
                this.bgc.backgroundColor="rgb(230,230,230)"
            }
        }
    },
}